<template>
  <v-dialog
    v-model="dialog"
    max-width="500"
  >
    <v-card class="text-center">
      <v-card-title>
        {{ title }}
        <v-spacer />
        <v-icon
          aria-label="Close"
          @click="dialog = false"
        >
          mdi-close
        </v-icon>
      </v-card-title>

      <v-card-text>
        {{ msg }}
      </v-card-text>

      <v-card-actions>
        <v-spacer />
        <v-btn
          color="error"
          text
          @click="dialog = false"
        >
          Close
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
  export default {
    name: 'AlertDialog',
    props: {
      value: Boolean,
      title: String,
      msg: String,
      callback: Function,
      input: String,
    },
    data () {
      return {
        dialog: this.value,
      }
    },
    watch: {
      dialog (val, oldVal) {
        if (val === oldVal) return

        this.$emit('input', val)
      },
      value (val, oldVal) {
        if (val === oldVal) return

        this.dialog = val
      },
    },
  }
</script>
